<template>
<div id="index" style="height:100%;width:100%;background-size:cover;">
    <div style="height:100px;width:100%;">
        <div style="height: 80px; width:100%;padding-top:10px;display:inline-block">
            <!-- <h1 style="color: #ffffff;">541导航</h1> -->
            <ul id="nav" style="display:inline_block">
                <li style="margin-left:100px"><button><a href="https://cn.bing.com/images/trending">图片</a></button></li>
                <li><button><a href="https://cn.bing.com/videos/trending">视频</a></button></li>
                <li><button><a href="https://cn.bing.com/academic/">学术</a></button></li>
                <li><button><a href="https://cn.bing.com/dict">词典</a></button></li>
                <li><button><a href="https://cn.bing.com/maps">地图</a></button></li>
                <li style="color:#ffffff">|</li>
                <li><button><a href="https://www.office.com/">Office</a></button></li>
                <li><button><a href="https://outlook.live.com/owa/?WT.mc_id=O16_BingHP">Outlook.com</a></button></li>
                <li style="display:inline-block;width:250px;float:right">
                    <div style="display:inline-block" v-if='!isLoggedIn'>
                        <el-button @click="dialogVisible = true;activeName='login'" type="text">登录</el-button>
                        <el-button @click="dialogVisible = true;activeName='register'" type="text">注册</el-button>
                            <!-- <a style="color:#ffffff" @click="dialogVisible = true;activeName='login'">登录</a> -->
                            <!-- <a style="color:#ffffff" @click="dialogVisible = true;activeName='register'">注册</a> -->
                    </div>
                    <div style="display:inline-block;margin-left:100px" v-else>
                            <el-dropdown>
                                <span class="el-dropdown-link" style="color:#ffffff">
                                    <i class="el-icon-user-solid" style="margin-right: 10px;"></i>会员中心
                                </span>
                                <el-dropdown-menu slot="dropdown">
                                    <el-dropdown-item @click.native="$router.push('/mycenter/'+user.id)">个人中心</el-dropdown-item>
                                    <el-dropdown-item @click.native='exit()'>退出</el-dropdown-item>
                                </el-dropdown-menu>
                            </el-dropdown>
                    </div>
                </li>
            </ul>
        </div>
    </div>

    <div style="width:500px;margin:auto;margin-top:250px;" id="index_home">
        <!-- <input id="content" style="height: 50px;width:500px;" > -->
        <el-input type="text" style="width:500px;" v-model="content" @keyup.enter.native="search()" placeholder="请输入搜索内容"></el-input>
        <!-- <el-button style="height: 50px;width: 140px;border:none;background-color:#00b7ea;color:#ffffff" @click.native="search()" type="primary">搜索一下</el-button> -->
    </div>

    <!-- 登录注册的悬浮框 -->
    <el-dialog
        :visible.sync="dialogVisible"
        width="400px"
        :before-close="handleClose" :show-close='false'
        id="logre">

        <el-tabs v-model="activeName" >
            <!-- 登录页面 -->
            <el-tab-pane label="登录" name="login">
                <p style="text-align: left;">欢迎来到541导航网!</p> 
                <el-form style="margin-top:20px" :model="login" status-icon  ref="ruleForm" label-width="40px" class="demo-ruleForm" id="login">
                <el-form-item label="帐号" prop="user">
                    <el-input type="text" v-model="login.user" autocomplete="off"></el-input>
                </el-form-item>

                <el-form-item label="密码" prop="pass">
                    <el-input type="password" v-model="login.pass" autocomplete="off"></el-input>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="getlogin()">登录</el-button>
                    <el-button @click="dialogVisible=false">取消</el-button>
                </el-form-item>
                </el-form>
            </el-tab-pane>

            <!-- 注册页面 -->
            <el-tab-pane label="注册" name="register">
                <p style="text-align: left;">创建您的541导航网帐户!</p> 
                <el-form style="margin-top:20px" :model="register" status-icon  ref="ruleForm" label-width="70px" class="demo-ruleForm" id="login">
                <el-form-item label="帐号" prop="user">
                    <el-input type="text" v-model="register.user" autocomplete="off"></el-input>
                </el-form-item>

                <el-form-item label="密码" prop="pass">
                    <el-input type="password" v-model="register.pass" autocomplete="off"></el-input>
                </el-form-item>

                <el-form-item label="确认密码" prop="passs">
                    <el-input type="password" v-model="register.passs" autocomplete="off"></el-input>
                </el-form-item>

                <el-form-item label="邮箱帐号" prop="email">
                    <el-input type="email" v-model="register.email" autocomplete="off"></el-input>
                    <p style="color:red;font-size:12px">请务必填写真实邮箱，方便急换网址时候通知您！</p>
                </el-form-item>


                <el-form-item>
                    <el-button type="primary" @click='getregister()'>注册</el-button>
                    <el-button @click="dialogVisible=false">取消</el-button>
                </el-form-item>
                </el-form>
            </el-tab-pane>
        </el-tabs>

    </el-dialog>
</div>
</template>


<script>
export default {
    name:'index',
    data() {
        return{
            dialogVisible: false,
            activeName: 'login',
            user:'',
            login:{
                user:'',
                pass:'',
            },
            register:{
                user:'',
                pass:'',
                passs:'',
                email:'', 
            },
            // 搜索框内容
            content:'',
            //是否登录
            isLoggedIn:false,
        }
    },
    methods:{
        handleClose() {
                this.dialogVisible = false;
        },
        //登录验证
        getlogin(){
            //开始验证帐号
            if(this.login.user == '' || this.login.pass == ''){
                this.$message({
                message: '帐号或密码不允许为空',
                type: 'warning'
                });
                return;
            }
            //调用登录接口
            this.$axios.post(this.$API.LOGIN,{
                user:this.login.user,
                pwd:this.login.pass
            }).then(res=>{
                // console.log(res);
                if(res.code==200){
                    this.$message({
                    message: '登录成功',
                    type: 'success'
                    });
                    this.handleClose();
                    this.isLoggedIn = true;
                    localStorage.status=true;
                    this.user = res.data;
                    localStorage.user = this.user;
                }else if(res.code==403){
                    this.$message.error('登录功能已关闭');
                }else{
                    this.$message.error('登录失败，请检查帐号或密码是否正确');
                }
            });


        },
        //注册
        getregister(){
            if(this.register.user == ''){
                this.$message({
                message: '请输入账号',
                type: 'warning'
                });
                return;
            }else if(this.register.user.length>11  || this.register.user.length<5){
                this.$message({
                message: '账号长度需要小于12，大于5',
                type: 'warning'
                });
                return;
            }
            if(this.register.pass == ''){
                this.$message({
                message: '请输入密码',
                type: 'warning'
                });
                return;
            }
            if(this.register.passs == ''){
                this.$message({
                message: '请输入确认密码',
                type: 'warning'
                });
                return;
            }
            if(this.register.email == ''){
                this.$message({
                message: '请输入邮箱',
                type: 'warning'
                });
                return;
            }

            if(this.register.pass != this.register.passs){
                this.$message({
                message: '两次密码不相同请重新输入',
                type: 'warning'
                });
                this.register.passs='';
                return;
            }
            //判断邮箱
            if(!/^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/.exec(this.register.email)){
                this.$message({
                message: '请输入正确的邮箱',
                type: 'warning'
                });
                return;
            }
            
            //执行注册
            this.$axios.post(this.$API.REGISTER,{
                user:this.register.user,
                pwd:this.register.pass,
                email:this.register.email
            }).then(res=>{
                console.log(res);
                if(res.code==200){
                    this.$message({
                    message: '注册成功',
                    type: 'success'
                    });
                    this.handleClose();
                }else if(res.code==-2){
                    this.$message.error('帐号已注册，请登录');
                }else if(res.code==403){
                    this.$message.error('注册功能已关闭');
                }
            });
        },
        //判断是否已经登录
        ifLogin(){
            if(localStorage.status!=undefined && localStorage.status=='true'){
                this.handleClose();
                this.isLoggedIn = true;
                //进行申请登录
                this.$axios.post(this.$API.LOGIN).then(res=>{
                    console.log(res);
                    if(res.code!=200){
                        this.isLoggedIn = false;
                        localStorage.status=false;
                    }else{
                        this.user = res.data;
                        console.log(res.data);
                        localStorage.user = this.user;
                    }
                });
            }   
        },
        //退出帐号
        exit(){
            localStorage.status=false;
            this.isLoggedIn=false
        },
        // 搜索
        search(){
            if(this.content==''){
                window.location.href = "https://www.baidu.com/s?ie=UTF-8&wd="+this.content;
                return;
            }
            this.$axios.post(this.$API.SEARCH,{
                content:this.content
            }).then(res=>{
                if(res.code==200){
                    //获取道数据
                    this.$router.push('search/'+res.data);
                }else{
                    //跳转百度
                    window.location.href = "https://www.baidu.com/s?ie=UTF-8&wd="+this.content;
                }
            });
        },
        //获取背景图片
        getBack(){
            this.$axios.post(this.$API.GETBACKTP,{
            }).then(res=>{
                console.log(res);
                if(res.code==200 && res.data){
                    //设置背景图片
                    document.getElementById('index').style.backgroundImage="url('"+res.data.url+"')";
                }else{
                    //显示默认背景
                    document.getElementById('index').style.backgroundImage="url('../../static/img/默认背景.jpeg')";
                }
            });


        }
       
    },
    //===============================生命周期=================================================
    created(){
            //判断是否已经登录
            this.ifLogin();
            this.getBack();

        },
    // ======================================================
    
}
</script>


<style scoped>

#nav{
    width: 100%;
}

#nav li{
    display:inline-block;
    height: 30px;
    width: 50px;
}
#nav > li > button{
    border:none;
    background:none;    
}
#nav > li > button > a{
    background:none;
    border:none;
    color:#ffffff;
    text-decoration:none;
    font-size:12px;
}

#logre >>> div{
    border-radius: 10px;
}

#logre >>> div.el-dialog__wrapper >>> div >>> div.el-dialog__body{
    padding:0 20px;
}

#logre >>> #tab-login,#logre >>> #tab-register{
    width: 160%;
    font-size: 16px;
}
#logre >>> div.el-dialog__header{
    display: none;
}

</style>